<template>
  <div class="app-container">
    <el-card>
      <div class="div">
        <el-input v-model="username" placeholder="用户名"></el-input>
        <el-button
          type="primary"
          :disabled="!username"
          class="el-icon-search"
          @click="search"
          round
          >查询</el-button
        ><el-button @click="clean" :disabled="!username" round>清空</el-button>
      </div>
      <br />
      <el-button @click="add" type="primary" round>添加</el-button>
      <el-button type="danger" @click="allDel" :disabled="!Arr.length" round
        >批量删除</el-button
      >
      <!-- 表格 -->
      <el-table
        @selection-change="allChecked"
        v-loading="listLoading"
        :data="userArr"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" type="selection" width="95">
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="95">
        </el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="用户昵称" prop="nickName"> </el-table-column>
        <el-table-column
          label="角色列表"
          prop="roleName"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="gmtCreate"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="270px"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              type="info"
              class="el-icon-user"
              @click="power(row)"
              size="mini"
            ></el-button>
            <el-button
              type="primary"
              class="el-icon-edit-outline"
              size="mini"
              @click="edit(row)"
            ></el-button>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              iconColor="red"
              @onConfirm="del(row.id)"
              title="确定删除吗？"
            >
              <el-button
                class="el-icon-delete"
                size="mini"
                slot="reference"
                type="danger"
              ></el-button>
              <!-- <el-button slot="reference">删除</el-button> -->
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="prev, pager, next, jumper,->,sizes,total"
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="page"
        background
        :page-size="limit"
        :page-sizes="[5, 10, 15]"
        :total="total"
      >
      </el-pagination>
      <!-- 对话框 -->
      <el-dialog title="收货地址" :visible.sync="show">
        <el-form :model="form" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="form.nickName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" v-if="!form.id">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <!--  -->
      <el-dialog title="收货地址" :visible.sync="isShow">
        <el-form label-width="100px" :model="formPro">
          <el-form-item label="用户名">
            <el-input v-model="formPro.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0px"></div>
          <el-checkbox-group
            v-model="checkedjuese"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in jueseList"
              :label="item.id"
              :key="item.id"
              >{{ item.roleName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="sure">保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  reqGetUserList,
  reqAddOrUpdata,
  reqDelete,
  reqAllDelete,
  reqJueseList,
  reqEditRole,
} from "@/api/table";
export default {
  data() {
    return {
      listLoading: false,
      page: 1,
      limit: 5,
      username: "",
      userArr: [],
      total: 0,
      show: false,
      isShow: false,
      form: {
        id: "",
        username: "",
        nickName: "",
        password: "",
      },
      Arr: [],
      formPro: {
        username: "",
      },
      jueseList: [],
      checkAll: false,
      checkedjuese: [],
      isIndeterminate: true,
      userId: "",
      roleId: [],
    };
  },

  methods: {
    async getList() {
      this.listLoading = true;
      try {
        const result = await reqGetUserList(
          this.page,
          this.limit,
          this.username
        );
        this.listLoading = false;
        // console.log(result);
        this.userArr = result.data.items;
        this.total = result.data.total;
      } catch (error) {}
    },
    changePage(value) {
      // console.log(value);
      this.username = "";
      this.page = value;
      this.getList();
    },
    changeSize(value) {
      this.limit = value;
      this, this.getList();
    },
    add() {
      this.show = true;
      this.form.id = "";
      this.form.username = "";
      this.form.nickName = "";
      this.form.password = "";
    },
    edit(row) {
      this.show = true;
      this.form.id = row.id;
      this.form.username = row.username;
      this.form.nickName = row.nickName;
      this.form.password = row.password;
    },
    async save() {
      this.show = false;
      // console.log(this.form);
      try {
        const result = await reqAddOrUpdata(this.form);
        this.changePage(this.form.id ? this.page : 1);
        this.$message.success(this.form.id ? "修改成功!" : "添加成功!");
        // console.log(result);
      } catch (error) {
        this.$message.error(this.form.id ? "修改失败!" : "添加失败!");
      }
    },
    async del(id) {
      try {
        await reqDelete(id);
        this.changePage(this.page);
        this.$message.success("删除成功!");
      } catch (error) {
        this.$message.error("删除失败!");
      }
    },
    allChecked(e) {
      const Arr = e.map((item) => {
        return item.id;
      });
      this.Arr = Arr;
    },
    async allDel() {
      try {
        await reqAllDelete(this.Arr);
        this.$message.success("删除成功!");
      } catch (error) {
        this.$message.success("删除失败!");
      }
    },
    async search() {
      this.page = 1;
      this.getList();
      this.username = "";
    },
    clean() {
      this.username = "";
      this.page = 1;
      this.getList();
    },
    async power(row) {
      this.jueseList = [];
      this.checkedjuese = [];
      this.userId = row.id;
      this.isShow = true;
      this.formPro.username = row.username;
      const result = await reqJueseList(row.id);
      // console.log(result);
      this.jueseList = result.data.allRolesList;
      this.checkedjuese = result.data.assignRoles.map((item) => item.id);
    },
    async sure() {
      this.isShow = false;
      try {
        const result = await reqEditRole(this.userId, this.roleId);
        this.getList();
        this.$message.success("修改权限成功");
        // console.log(result);
      } catch (error) {
        this.$message.error("修改权限失败");
      }
    },
    handleCheckAllChange(val) {
      this.checkedjuese = val ? this.jueseList.map((item) => item.id) : [];
      this.isIndeterminate = false;
      this.roleId = this.jueseList.map((item) => item.id);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value?.length;
      this.checkAll = checkedCount === this.jueseList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.jueseList.length;
      this.roleId = value;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style>
.el-input {
  width: 200px;
}
.el-form-item .el-input {
  width: 500px;
}
.el-button {
  margin: 0 20px;
}
.el-table {
  margin-top: 15px;
}
.div {
  margin: 10px 0;
}
.el-checkbox {
  margin: 10px;
}
</style>
